import React, { Component, createRef } from 'react'
import { Tree, Button, Modal, Form, Space, message } from 'antd';
import { post } from '@/lib';
// import { FormTextItem } from '@/components'
import styles from './index.module.css'
import Detail from './Detail'
import QrcodeModal from './QrcodeModal'

export default class Organization extends Component {
  // 创建一个form的引用
  formRef = createRef();
  detailRef = createRef();
  qrcodeRef = createRef();

  state = {
    // treeData: [
    //   {
    //     title: 'parent 1',
    //     key: '0-0',
    //     children: [
    //       {
    //         title: 'parent 1-0',
    //         key: '0-0-0',
    //         children: [
    //           {
    //             title: 'leaf',
    //             key: '0-0-0-0',
    //           },
    //           {
    //             title: 'leaf',
    //             key: '0-0-0-1',
    //           },
    //           {
    //             title: 'leaf',
    //             key: '0-0-0-2',
    //           },
    //         ],
    //       },
    //       {
    //         title: 'parent 1-1',
    //         key: '0-0-1',
    //         children: [
    //           {
    //             title: 'leaf',
    //             key: '0-0-1-0',
    //           },
    //         ],
    //       },
    //       {
    //         title: 'parent 1-2',
    //         key: '0-0-2',
    //         children: [
    //           {
    //             title: 'leaf',
    //             key: '0-0-2-0',
    //           },
    //           {
    //             title: 'leaf',
    //             key: '0-0-2-1',
    //           },
    //         ],
    //       },
    //     ],
    //   },
    // ]
    treeData: [],
    current: null, // 当前组织

  }

  componentDidMount() {
    this.getTreeData();
  }

  getTreeData = async (selectedNode) => { // 获取组织的树形结构
    const data = await post('/tree/organization', { parents: { organizationId: { parentField: '_id' } } });
    if (data.success) {
      this.setState({ treeData: data.result, current: selectedNode || data.result[0] });
    }
  }

  deleteCurrent = () =>{  //删除
    const {current} = this.state
    Modal.confirm({
      content:'你确定要删除该数据吗？',
      onOk:async()=>{
        const data =await post('/remove/organization',{id:current.id})
        if(!data.success){
          return Modal.error({content:data.message})
        }
        this.getTreeData()
        message.success('删除成功')
      }
    })
  }

  createOrganization = async () => {
    const values = await this.formRef.current.validateFields().catch(e => { });
    if (!values) return;
    // return console.log('=================values', values);
    const data = await post('/create/organization', values);
    if (!data.success) {
      return alert(data.message);
    }
    // 树形树形列表
    this.getTreeData();
  }

  createChild = () => { // 创建下级组织
    this.detailRef.current.showCreateChild(this.state.current);
  }

  onSelect = (selectedKeys, e) => {
    this.setState({ current: e.node });
  }
  QrcodeModal=(record)=>{
    this.qrcodeRef.current.show(record)
  }

  showModify = ()=>{ //显示修改弹窗
    this.detailRef.current.show(this.state.current)
  }

  render() {
    const { treeData, current } = this.state;
    return (
      <div className={styles.container}>
        <div className={styles.tree}>
          <h3 className={styles['tree-title']}>组织架构树</h3>
          <Tree
            showLine
            fieldNames={{ title: 'name', key: 'id', children: 'children' }}
            treeData={treeData}
            onSelect={this.onSelect}
          />
        </div>
        <div className={styles.content}>
          {
            treeData.length &&
            <Space className={styles.top}>
              <Button type="primary" onClick={this.createChild}>创建下级组织</Button>
              <Button type="primary" onClick={(record)=>this.QrcodeModal(record)}>下载二维码</Button>
              <Button type="primary">查看评分结果</Button>
              <Button type="primary" onClick={this.showModify}>修改</Button>
              {(current&&(!current.children||!current.children.length))&&<Button type="primary" danger onClick={this.deleteCurrent} >删除</Button>}
            </Space>
            ||
            <Button type="primary" onClick={this.createChild}>创建平台</Button>
          }
          {
            // 只有current存在的时候才显示
            current &&
            <Form
              ref={this.formRef}
              name="basic"
              labelCol={{
                span: 8,
              }}
              wrapperCol={{
                span: 16,
              }}
              style={{
                maxWidth: 600,
              }}
              initialValues={{ // 初始值
                name: '', // 修改传过来的初始值
              }}
              autoComplete="off"
            >
              <Form.Item label="组织机构名称">{current.name}</Form.Item>
              <Form.Item label="组织机构描述">{current.description}</Form.Item>
            </Form>
          }
        </div>
        <Detail ref={this.detailRef} refreshList={this.getTreeData}></Detail>
        <QrcodeModal ref={this.qrcodeRef}></QrcodeModal>
      </div>
    )
  }
}
